/*
 * @Description: 订单入口模块
 * @Author: ziwei.ma
 * @Date: 2019-06-21 14:04:44
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-06-27 17:15:27
 */

<template>
  <div class="order-warpper flex-v">
    <!-- 我的订单层 -->
    <div class="my-order fontsize28">我的订单{{orderCount}}</div>
    <!-- 订单状态 -->
    <div class="order-status-warpper flex-h">
      <div
        class="flex-v flex-vc"
        v-for="(option,index) in orderStatusList"
        :class="[index === firstOption?'order-status-nomargin':'order-status']"
        :key="index"
        @click="jumpToOrder(option.URL)"
      >
        <div
          class="status-icon icon iconfont"
          :class="option.ICONFONT"
        ></div>
        <span
          class="order-bubble"
          v-show="isBubble && option.BUBBLE>0"
        >{{option.BUBBLE}}</span>
        <div class="status-name fontsize22">{{option.NAME}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderBubble } from '../api/api.js'
// import { getUserInfo } from 'vue-xiaobu-utils'
import { detectionGoToPage } from '@/utils/JumpUtils'
export default {
  data() {
    console.log('window.ORDER_STATUS_LIST', window.ORDER_STATUS_LIST)
    return {
      orderStatusList: window.ORDER_STATUS_LIST, // 从配置文件获取的订单状态选项列表
      firstOption: 0, // 判断是否为第1个订单状态入口,若是则没有左外边距
      orderCount: '', // 订单总数
      isBubble: false
      // isLogin: parseInt(getUserInfo().IS_LOGIN)
    }
  },
  mounted() {
    this.getOrderNumber()
  },
  methods: {
    // 获取不同订单状态的不同订单气泡数量
    getOrderNumber() {
      if (this.isLogin === 1) {
        this.isBubble = true
        getOrderBubble().then(res => {
          console.log('orderList', res)
          this.orderCount = '(' + res[0].orderBubble + ')'
          // 遍历配置列表
          this.orderStatusList.map(item => {
            // 遍历协议返回的res
            res.map(resItem => {
              if (item.TYPE === resItem.orderKey) {
                // item.BUBBLE = resItem.orderBubble
                this.$set(item, 'BUBBLE', resItem.orderBubble)
              }
            })
          })
        })
      } else {
        this.isBubble = false
      }
    },
    // 点击跳转进入订单or登录页
    jumpToOrder(url) {
      detectionGoToPage(url)
    }
  },
  watch: {
    resumeCount() {
      this.getOrderNumber()
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.loginStatus
    },
    resumeCount() {
      return this.$store.getters.resumeCount
    }
  }

}
</script>

<style scoped>
.order-warpper {
  width: 690px;
  height: 251px;
  padding: 0 30px;
  background-color: #fff;
}
.my-order {
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #f1f1f1; /*no*/
  color: #333333;
}
.order-status-warpper {
  height: 139px;
  padding: 11px 0 20px 0;
}

.order-status {
  position: relative;
  height: 139px;
  width: 100px;
  margin-left: 47.5px;
  color: #666666;
}
.order-status-nomargin {
  position: relative;
  height: 139px;
  width: 100px;
  color: #666666;
}
.status-icon {
  height: 52px;
  margin: auto;
  font-size: 48px;
}
/* 订单气泡 */
.order-bubble {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 20px;
  height: 20px;
  line-height: 26px;
  text-align: center;
  font-size: 18px;
  padding: 6px;
  border-radius: 50%;
  color: #fff;
  background-color: #4f90ff;
}
.status-name {
  height: 48px;
  line-height: 48px;
  text-align: center;
  margin-bottom: 9px;
}
</style>
